<html>
	<head>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script src="/jquery-tmpl-master/jquery.tmpl.min.js"></script>
		<style type="text/css">
			div.success{
				background-color: rgb(43, 224, 43);
			}
			div.failure{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="testResults" />
		
		<script id="resultTemplate" type="text/x-jquery-tmpl">
				<div class="${success}">${testName}:<br/><br/>${description}<br/><br/>expected ${expected}, but was ${actual}<br/><hr/></div>
		</script>
		<script type="text/javascript">	
			function testCalculateDrawData(input, expected, testName, description){
				var result = calculateDrawData(input);
				
				var expectedValues = "";
				$.each(expected, function(index, val) {
					expectedValues = expectedValues + " ; " + val;
				});
				var actualValues = "";
				$.each(result, function(index, val) {
					actualValues = actualValues + " ; " + val;
				});
			
				if(arraysEqual(expected, result)){
					data = [
						{
							testName : testName,
							expected : expectedValues,
							actual : actualValues,
							description : description,
							success : "success"
						}
					];
				} else {
					data = [
						{
							testName : testName,
							expected : expectedValues,
							actual : actualValues,
							description : description,
							success : "failure"
						}
					];
				}
				$( "#resultTemplate" ).tmpl( data ).appendTo( "#testResults" );	
			}
			
			
			//#############################################################
			//###################  START TEST METHODS #####################
			//#############################################################

			/**
			* Calculate the data that's needed to draw the image in the image editor on the
			* resulting image. E.g. remove left part of the image, resize the image, move the image, ...
			*/
			function calculateDrawData(args){
				//left offset of the image element
				var imageLeft = args[0];
				//width of the image element
				var imageWidth = args[1];
				//top offset of the image element
				var imageTop = args[2];
				//height of the image element
				var imageHeight = args[3];
			
				//left offset of the container element
				var containerLeft = args[4];
				//width of the container element
				var containerWidth = args[5];
				//top offset of the container element
				var containerTop = args[6];
				//height of the container element
				var containerHeight = args[7];
				
				//the effective width of the given image
				var realImageWidth = args[8];
				//the effective height of the given image
				var realImageHeight = args[9];
			
				if(overlaps(imageWidth, containerWidth, imageHeight, containerHeight, imageLeft, containerLeft, imageTop, containerTop)){
					//image boundaries are the same as the ones from the canvas
					sourceX = imageLeft;
					sourceY = imageTop;
					sourceWidth = imageWidth;
					sourceHeight = imageHeight;
					destX = 0;
					destY = 0;
					destWidth = imageWidth;
					destHeight = imageHeight;
				
				} else {
					if(objectResized(realImageWidth, realImageHeight, imageWidth, imageHeight)){
					
					} else{
						//object is not resized
						sourceX = 0;
						sourceY = 0;
						sourceWidth = 0;
						sourceHeight = 0;
						destX = 0;
						destY = 0;
						destWidth = 0;
						destHeight = 0;
					}
				}
				
				return [sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight];
			}
			
			function hasSameWidth(object1Width, object2Width){
				return object1Width == object2Width;
			}
			
			function hasSameHeight(object1Height, object2Height){
				return object1Height == object2Height;
			}
			
			function objectResized(oldWidth, oldHeight, newWidth, newHeight){
				return !(hasSameWidth(oldWidth, newWidth) && hasSameHeight(oldHeight, newHeight));
			}
			
			function overlaps(object1Width, object2Width, object1Height, object2Height, object1Left, object2Left, object1Top, object2Top){
				var notResized = !objectResized(object1Width, object2Height, object2Width, object2Height);
				return notResized && (object1Left == object2Left) && (object1Top == object2Top);
			}
			
			
			//#############################################################
			//###################  STOP TEST METHODS ######################
			//#############################################################
			
			function arraysEqual(a, b) {
			  if (a === b) return true;
			  if (a == null || b == null) return false;
			  if (a.length != b.length) return false;

			  // If you don't care about the order of the elements inside
			  // the array, you should sort both arrays here.

			  for (var i = 0; i < a.length; ++i) {
				if (a[i] !== b[i]) return false;
			  }
			  return true;
			}
		</script>
		
		<script type="text/javascript">
			var testName = "Test 1";
			var description = "The orginal image has the same dimensions as the canvas and the left and top offset of image and canvas are collapsing. " +
			"The expected result is that we get the dimensions of the image/canvas (as it's the same) with x and y start equal to '0'. " +
			"Source width and height will be equal to dest width and height and equal to original width and height, as no transformation (resize/move occurred)";
			var input = [10,200,20,100,10,200,20,100, 200,100];
			var expectedOutput = [10,20,200,100,0,0,200,100];
			testCalculateDrawData(input, expectedOutput, testName, description);
			//
			var testName = "Test 2";
			var description = "The original image is not resized, but is bigger than the canvas (the canvas is fully surrounded by the image. " +
			"The expected result is that the image is not resized and that the part laying inside the boundaries of the canvas is returned";
			var input = [0,1000,0,900,100,800,200,600,1000,900];
			var expectedOutput = [100,200,800,600,0,0,800,600];
			testCalculateDrawData(input, expectedOutput, testName, description);
			//
		</script>
	</body>
</html>